<template>
	<view class="journey-detail-container">
		<view class="detail-container" v-if="isLoadEnd">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in detailData.imgArr" :key="item._id">
					<image @click="previewImage(item)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="context">
				<image :src="detailData.avatar" mode="aspectFill"></image>
				<view class="context-title">
					{{detailData.title}}
				</view>
			</view>
			<view class="address">
				<uni-icons type="location" size="40" color="#999"></uni-icons>
				{{detailData.address}}
			</view>
			<view class="content">
				<view class="introduce">
					<view class="title">
						客栈介绍
					</view>
					<text>{{detailData.introduce}}</text>
				</view>
				<view class="time">
					<view class="title">
						时间
					</view>
					<text>{{detailData.time[0] | formatDate}}</text>
					----
					<text>{{detailData.time[1] | formatDate}}</text>
				</view>
				<view class="time">
					<view class="title">
						招募人数
					</view>
					<text>{{detailData.number}}</text>
				</view>
				<view class="time">
					<view class="title">
						掌柜
					</view>
					<text>{{detailData.name}}</text>
				</view>
				<view class="time">
					<view class="title">
						联系电话
					</view>
					<text>{{detailData.phone}}</text>
				</view>
				<view class="work-content">
					<view class="title">
						工作内容
					</view>
					<text>
						{{detailData.content}}
					</text>
				</view>
				<view class="demand">
					<view class="title">
						要求
					</view>
					<text>
						{{detailData.demand}}
					</text>
				</view>
			</view>
			<view class="application" @click="seeEnrollForm" v-if="isQiye">
				<view class="flex">
					<text class="txt">查看报名表</text>
					<uni-icons type="checkmarkempty" color="#fff" size="32"></uni-icons>
				</view>
			</view>
			<!-- <view class="application" @click="goApplication" v-else>
				<view class="flex">
					<text class="txt">我要报名</text>
					<uni-icons type="checkmarkempty" color="#fff" size="32"></uni-icons>
				</view>
			</view> -->
			<!-- 垫片 -->
			<view style="height: 1px;"></view>

			<view class="sign pos" @click="signIn">
				打卡签到
			</view>
			<view class="mapNavigation pos" @click="mapNavigation">
				地图导航
			</view>
		</view>
	</view>
</template>

<script>
	// 引入sdk核心类
	var QQMapWX = require('../../../js_sdk/qqmap-wx-jssdk.min.js');
	export default {
		data() {
			return {
				isLoadEnd: false, //判断是否加载完成
				detailData: null,
			}
		},
		onShow() {
			this.detailData = this.$Route.query.item;
			this.isLoadEnd = true;
		},
		filters: {
			// 时间戳格式化时间
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				return y + '-' + MM + '-' + d; //年月日
			}
		},
		methods: {
			// 图片预览
			previewImage(url) {
				wx.previewImage({
					current: url, // 当前显示图片的http链接
					urls: this.detailData.imgArr // 需要预览的图片http链接列表
				})
			},
			// 打卡签到
			signIn() {
				// 判断企业是否开启打卡
				if(this.detailData.isClockIn){
					this.$Router.push({
						path: "/pages/journey/signIn/signIn",
						query: {
							id:this.detailData._id,
							latitude:this.detailData.latitude,
							longitude:this.detailData.longitude
						}
					})
				}else{
					uni.showToast({
						title:"企业未开启打卡"
					})
				}
				
			},
			// 地图导航
			mapNavigation() {
				// 实例化api核心类
				const qqmapsdk = new QQMapWX({
					key: 'REPBZ-M46C3-3IM3Z-OEBQF-2DYSS-ZFFY3' // 必填
				});
				qqmapsdk.geocoder({
					address: this.detailData.address,
					success: (res) => {
						let latitude = res.result.location.lat;
						let longitude = res.result.location.lng;
						uni.openLocation({
							latitude,
							longitude,
						});
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	@import "./css/journeyDetail.scss";
</style>
